<template>
    <view>
        <navBar title="已失效的" bgColor="transparent"></navBar>
        <view class="viewbox auto">
            <view class="intro">
                <image :src="headImg" mode="aspectFill" class="Logo"></image>
                <view class="intro_box">
                    <text class="ellipsis black size32 bold">卡片名称卡片名</text>
                    <text class="ellipsis color_99 h6 m-top8">这儿是卡片的摘要说</text>
                    <text class="ellipsis color_cc h6 m-top8">2025年9月15日到期</text>
                </view>
                <view class="actuality">
                    <view class="Use">已失效</view>
                    <view class="lineBox">
                        <u-line-progress
                            :percentage="80"
                            :showText="false"
                            :height="4"
                            activeColor="#999999"></u-line-progress>
                    </view>
                    <text class="residue">剩余 0 次</text>
                </view>
            </view>
            <view class="intro">
                <image :src="headImg" mode="aspectFill" class="Logo"></image>
                <view class="intro_box">
                    <text class="ellipsis black size32 bold">卡片名称卡片名</text>
                    <text class="ellipsis color_99 h6 m-top8">这儿是卡片的摘要说</text>
                    <text class="ellipsis color_cc h6 m-top8">2025年9月15日到期</text>
                </view>
                <view class="actuality">
                    <view class="Use">已失效</view>
                    <view class="lineBox">
                        <u-line-progress
                            :percentage="50"
                            :showText="false"
                            :height="4"
                            activeColor="#999999"></u-line-progress>
                    </view>
                    <text class="residue">剩余 4 次</text>
                </view>
            </view>

            <emptys></emptys>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg'
            }
        },
        methods: {}
    }
</script>
<style>
    page {
        background-color: #f2f2f2;
    }
</style>
<style lang="scss" scoped>
    .intro {
        width: 100%;
        background-color: #ffffff;
        border-radius: 10rpx;
        margin-top: 20rpx;
        display: flex;
        align-items: center;

        overflow: hidden;
        padding: 30rpx 24rpx;

        &_box {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .actuality {
            display: flex;
            flex-direction: column;
            align-items: center;
            .Use {
                width: 160rpx;
                height: 60rpx;
                border-radius: 10rpx;
                background-color: #f3f3f3;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #999999;
                font-size: 26rpx;
            }
            .lineBox {
                width: 170rpx;
                margin-top: 10rpx;
            }
            .residue {
                margin-top: 10rpx;
                color: #999;
            }
        }
    }
    .Logo {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
</style>
